<template>
	<view class="content">
			<page-head :title="title"></page-head>
		<view class="bg-white padding" v-if="route.startName">
			<view class="desc">
				<view v-if="direction == 1" class="station"><text class="tit">{{route.startName}} - {{route.endName}}</text></view>
				<view v-if="direction == 2" class="station"><text class="tit">{{route.endName}} - {{route.startName}}</text></view>
				<view class="solid-bottom">
					<view class='cu-tag bg-white'>
						<view class="medium bg-green oval">首</view>
						<text class="timer margin-lr-xs">{{route.firstTime}}</text>
					</view>
					<view class='cu-tag bg-white'>
						<view class="medium bg-red oval">末</view>
						<text class="timer margin-lr-xs">{{route.lastTime}}</text>
					</view>
					<view class="cu-tag bg-white timer">票价:{{route.price}}元</view>
				</view>
				<view class="change" @click="changeDirection">
					<image src="../../static/icon_change.png" />
				</view>
			</view>
		</view>

		<!--汽车列表-->
		<view class="list bg-white">
			<view class="detail">
				<view :class="sList.length-1 == index ? 'detail-list-last':'detail-list'" v-for="(item,index) in sList" :keywords="index">
					<view :style="[{ top:item.isStation ==1 ?':35%':'',position:'absolute',left:'-60px'}]" v-if="item.bus">
						<image class="bus-icon" src="../../static/icon_bus.png"></image>
					</view>
					<view class="detail-load detail-process">
						<text>{{item.stationName}}</text>
					</view>
				</view>
			</view>
		</view>

		<view v-if="route.focus == 0" @click="collect" class="collection">
			<image class="coll-img" src="../../static/icon_collect1.png"></image>
		</view>
		<view v-if="route.focus == 1" @click="cancelCollect" class="collection">
			<image class="coll-img" src="../../static/icon_collect2.png"></image>
		</view>
	</view>
</template>
<script>
	import http from '../../common/http.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				route: {},
				sList: [],
				direction: 1,
				routeId: 0,
				title:""
			}
		},
		computed: {
			...mapState(['userInfo', 'isLogin']),
		},
		onLoad(options) {
			this.routeId = options.routeId;
			this.initDate(options);
			this.setTitle(options)
		},
		methods: {
			...mapMutations(['showLoading', 'hideLoading']),
			//获取公交路线
			initDate: function(options) {
				let _self = this;
				_self.showLoading();
				let url = '/app/api/qrcode/route/detail/' + _self.routeId + '?direction=' + _self.direction + '&openId=' + _self.userInfo
					.openId;
				http.get(url, function(result) {
					if (result.code == 0 && result.data) {
						let data = result.data;
						_self.route = data.qrRoute;
						for (let i = 0; i < data.sList.length; i++) {
							if (data.vList.length > 0) {
								for (let j = 0; j < data.vList.length; j++) {
									if (data.vList[j].ordering == data.sList[i].ordering) {
										data.sList[i].bus = {
											isStation: data.vList[j].isStation,
											latitude: data.vList[j].latitude,
											longitude: data.vList[j].longitude,
											speed: data.vList[j].speed
										}
									}
								}
							}
						}
						_self.sList = data.sList;
						_self.hideLoading();
					}
				});
			},
			changeDirection: function(e) {
				this.direction = this.direction == 1 ? 2 : 1;
				this.initDate();
			},
			collect: function() {
				let _self = this;
				if (_self.isLogin == false) {
					_self.login();
					return;
				}
				http.post('/app/api/qrcode/focus/' + this.userInfo.openId + '/' + this.routeId + '/true', {}, function(result) {
					if (result.code == 0) {
						_self.initDate();
						uni.showToast({
							title: "已成功收藏"
						});
					}
				});
			},
			cancelCollect: function() {
				let _self = this;
				if (_self.isLogin == false) {
					_self.login();
					return;
				}
				http.delete('/app/api/qrcode/focus/' + this.userInfo.openId + '/' + this.routeId + '/false', {}, function(result) {
					if (result.code == 0) {
						_self.initDate();
						uni.showToast({
							title: "已取消收藏"
						});
					}
				});
			},
			login() {
				uni.navigateTo({
					url: '/pages/login/index'
				});
			},
			setTitle:function(options){
				console.log(options);
				uni.setNavigationBarTitle({
					title: options.routeName
				})
			}
		}
	}
</script>

<style>
	.station {
		font-size: 15px;
	}

	.tit {
		font-size: 14px;
		color: #1F1F1F;
	}

	.oval {
		border-radius: 4px;
	}

	.change {
		position: absolute;
		right: 15px;
		top: 30px;
	}

	.change image {
		height: 24px;
		width: 26px;
	}

	.medium {
		font-size: 12px;
		padding: 0px 12px;
		height: 20px;
		line-height: 20px;
	}

	.cu-tag {
		padding: 0px;
	}

	.timer {
		font-size: 13px;
		font-weight: 400;
	}

	.bg-green {
		background-color: #70cc5d;
	}

	.bg-red {
		background-color: #ff7f7f;
	}

	.bus-icon {
		height: 20px;
		width: 20px;
	}

	.list {
		margin: 15px 10px;
		padding: 10px 20px;
	}

	.round-position {
		position: absolute;
		padding: 15px 50px;
	}

	.round {
		border-radius: 50%;
		width: 10px;
		height: 10px;
		border: 1px solid #CDCDB4;
	}

	.text-center {
		line-height: 3em;
		height: 3em;
	}

	.route {
		display: block;
		padding: 7px 80px;

	}

	.detail {
		width: 100%;
		box-sizing: border-box;
		padding-left: 40px;
	}

	.detail .lis-start {
		margin-left: 20px;
		position: relative;
		border-bottom: 1px solid #ddd;
	}

	.bus-route {
		margin: 10px 0px;
		position: absolute;
		left: 10px;
	}

	.bus-route .bus-list {
		margin-left: 20px;
		position: relative;
	}

	.detail .lis-start:after {
		content: "";
		width: 2px;
		height: 16px;
		background: #ccc;
		position: absolute;
		left: -21px;
		bottom: -1px;
	}

	.detail .lis-start text {
		margin: 15px 0;
		font-size: 14px;
		color: #333
	}

	.detail .lis-start image {
		width: 20px;
		height: 20px;
		position: absolute;
		left: -30px;
		top: 50%;
		transform: translate(0, -50%);
	}

	.detail .lis-start .start-origin {
		width: 70%;
		float: left;
	}

	.detail .lis-start .start-case {
		width: 30%;
		float: right;
		text-align: right;
		color: #0091ff
	}

	.detail .lis-start .clear {
		clear: both;
	}


	.detail .lis-end {
		height: 50px;
		margin-left: 20px;
		position: relative;
	}

	.detail .lis-end:after {
		content: "";
		width: 2px;
		height: 16px;
		background: #ccc;
		position: absolute;
		left: -21px;
		top: -1px;
	}

	.detail .lis-end text {
		margin: 15px 0;
		font-size: 14px;
		color: #333
	}

	.detail .lis-end image {
		width: 20px;
		height: 20px;
		position: absolute;
		left: -30px;
		top: 50%;
		transform: translate(0, -50%);
	}

	.detail .lis-end .end-origin {
		float: left;
	}

	.detail .lis-end .end-case {
		float: right;
		text-align: right;
		color: #0091ff
	}


	.detail .detail-list {
		margin-left: 20px;
		position: relative;
	}
	
	.detail .detail-list-last {
		margin-left: 20px;
		position: relative;
	}
	
	.detail .detail-list:before {
		content: "";
		width: 1px;
		height: 100%;
		background: #ccc;
		position: absolute;
		left: -23px;
		top: 20px;
	}

	.detail .detail-list-last:before {
		content: "";
		width: 1px;
		height: 100%;
		background: #ccc;
		position: absolute;
		left: -23px;
		top: -20px;
	}
	
	.detail .detail-list:after {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 8px;
		background: #eee;
		border: 1px solid #bbb;
		position: absolute;
		left: -28px;
		top: 50%;
		transform: translate(0, -50%);
	}
	.detail .detail-list-last:after {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 8px;
		background: #eee;
		border: 1px solid #bbb;
		position: absolute;
		left: -28px;
		top: 50%;
		transform: translate(0, -50%);
	}

	.detail .action:after {
		background: #0081FF;
	}

	.detail-load {
		padding-top: 10px;
	}

	.detail-load text:nth-child(1) {
		font-size: 14px;
		color: #333
	}

	.detail-process {
		border-bottom: 1px solid #ddd;
		padding-bottom: 10px;
	}

	.detail-process text {
		font-size: 14px;
		color: #999;
	}

	.detail-process .notify {
		color: #007AFF;
		padding-left: 1px;
		font-size: 14px;
		font-weight: 200;
	}

	.collection {
		border-radius: 50%;
		width: 65px;
		height: 65px;
		top: 68%;
		position: fixed;
		z-index: 100;
		right: 8px;
	}

	.coll-img {
		width: 70px;
		height: 70px;
		text-align: center;
		display: contents;
	}
</style>
